<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="layui/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="nav white">
        <div class="left">
            <a href="/index"><img src="img/nav.png"></a>
            <span>闲易二手市场</span>
        </div>
        <div class="search">
            <input type="text" class="goodsInfo">
            <button class="searchGoods">搜索</button>
        </div>
        <div class="change">
            <span class="login">登录</span>
            <span class="regist">注册</span>
        </div>
        <div class="right">
            <button>我要发布</button>
        </div>

        <div class="li">
            <ul>
                <a href="/user" target="_blank"><li>个人中心</li></a>
                <li class="nologin">退出登录</li>
            </ul>
        </div>

    </div>

    <div class="main">
        <div class="mainLeft">
            <!--<li>
                <a class="index">
                    <img src="img/index.png">
                    <span>最新发布</span>
                </a>
            </li>-->

        </div>
        <div class="content">
            <div class="banner">
                <P class="animated bounceInLeft">HELLO</p>
                <p class="animated bounceInLeft">
                    欢迎来到【闲易】校园二手市场。临近毕业季的你，是否有太多的闲置与校友分享，为了追求更好的校园服务，我们打造了一个全新的校园平台——<span>闲易校园二手市场。</span>这里有更多的闲置分享，更自由的校园话题讨论，你想要的，都在这里。
                </p>
                <p class="animated bounceInLeft">加入闲易二手市场，你的大学，应更精彩。</p>
            </div>

            <div class="menu">
                <!--<h1>最新发布</h1>-->
                <!--<div class="box">
                    <div class="card">
                        <img src="http://139.199.83.47:80/squirrel/upload/d75711a2-ce0d-487b-afc7-49fe94e75c54.jpg">
                        <span class="price">128.0</span>
                        <p>Java swing 实现的汽车租赁系统</p>
                        <span class="date">2019-03-14</span>
                        <span class="mark">闲易市场</span>
                    </div>
                    <div class="card">
                        <img src="http://139.199.83.47:80/squirrel/upload/d75711a2-ce0d-487b-afc7-49fe94e75c54.jpg">
                        <span class="price">128.0</span>
                        <p>Java swing 实现的汽车租赁系统</p>
                        <span class="date">2019-03-14</span>
                        <span class="mark">闲易市场</span>
                    </div>
                    <div class="card">
                        <img src="http://139.199.83.47:80/squirrel/upload/d75711a2-ce0d-487b-afc7-49fe94e75c54.jpg">
                        <span class="price">128.0</span>
                        <p>Java swing 实现的汽车租赁系统</p>
                        <span class="date">2019-03-14</span>
                        <span class="mark">闲易市场</span>
                    </div>
                    <div class="card">
                        <img src="http://139.199.83.47:80/squirrel/upload/d75711a2-ce0d-487b-afc7-49fe94e75c54.jpg">
                        <span class="price">128.0</span>
                        <p>Java swing 实现的汽车租赁系统</p>
                        <span class="date">2019-03-14</span>
                        <span class="mark">闲易市场</span>
                    </div>
                </div>-->
            </div>

           

        </div>
    </div>
    <div id="laypage"></div>
    <div class="goto">
        <img src="img/back.png">
    </div>
    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="layui/layui.all.js"></script>
    <script src="js/url.js"></script>
    <script>
        $(function () {

            /**
             * 首页判断，登录成功后进行判断
             */
            change();

            function change() {
                if (localStorage.getItem("phone")) {
                    $(".change").empty();
                    var html = "";
                    html += `<span class="pull">已发布的商品</span>
      <img src="img/right.png">`;
                    $(html).appendTo(".change")

                }
            }

            var GOODSINFO=ARR["goodsInfo"];
            /**
             * 如果传来有goodsinfo进行搜索
             *
             */
            if(GOODSINFO!=undefined){
                $.when( searchGoods(GOODSINFO, 6, 1)).done(function () {
                    layui.use('laypage', function () {
                        var laypage = layui.laypage;
                        //执行一个laypage实例
                        // console.log(COUNT)
                        laypage.render({
                            elem: 'laypage',
                            count: SCOUNT,
                            limit: 6,
                            theme: "#5599FF",
                            layout: ['count', 'prev', 'page', 'next'],
                            jump: function (obj, first) {

                                if (!first) {
                                    // console.log($(this).data('cid'))
                                    searchGoods(GOODSINFO, 6, obj.curr);
                                }


                            }
                        });
                    });
                })
            }

            var flag = 1;
            $(".change img").click(function () {
                if (flag == 1) {
                    flag = 0;
                    $(".li").show();
                } else if (flag == 0) {
                    flag = 1;
                    $(".li").hide();
                }

            })

            /**
             * 退出登录，清除缓存
             */
            $(".nologin").click(function () {
                localStorage.clear();
                window.location.reload();
            })

            function getCateLog() {
                $.ajax({
                    type: "post",
                    url: "/catelog/getCateLog",
                    dataType: "json",
                    success: function (data) {
                        var data = data.data;
                        var html = "";
                        for (let i = 0; i < data.length; i++) {
                            html += `<li data-id="${data[i].id}">
                   <a>
                      <img src="${data[i].img}">
                      <span>${data[i].name}</span>
                   </a>
                </li>`;

                        }
                        html += `        <p>关于我们|联系我们</p>
        <p>©2019 闲易二手市场</p>`
                        $(html).appendTo(".mainLeft");
                    }
                });
            }

            getCateLog();

            $(".login").click(function () {

                location.href='/login'
            });
            $(".regist").click(function () {

                location.href='/regist'
            });


            /**
             * 进入首页加载
             */
            getAllCateLog();

            function getAllCateLog() {
                $.ajax({
                    type: "post",
                    url: "/goods/getAllCateLog",
                    dataType: "json",
                    success: function (data) {
                        var data = data.data;
                        var html = "";

                        for (let i = 0; i < data.length; i++) {
                            html += `<div class="menu">
                         <h1>${data[i].catename}</h1>
                           <div class="box">`;
                            var goodses = data[i].goodses;
                            for (let j = 0; j < goodses.length; j++) {
                                html += ` <div class="card" data-catename="${data[i].catename}" data-id="${goodses[j].id}" data-name="${goodses[j].name}" data-price="${goodses[j].price}" data-realprice="${goodses[j].realPrice}" data-polishtime="${goodses[j].polishTime}" data-describle="${goodses[j].describle}" data-imgurl="${"/upload/goods/" + goodses[j].imgUrl}">
                   <img src="${"/upload/goods/" + goodses[j].imgUrl}">
                   <span class="price">${goodses[j].price}</span>
                   <p>${goodses[j].name}</p>
                   <span class="date">${goodses[j].polishTime}</span>
                   <span class="mark">闲易市场</span>
               </div>`


                            }

                            html += `</div>
              </div>`;
                        }
                        $(html).appendTo(".content");


                    }
                });
            }

            //返回顶部
            $(".goto").click(function () {
                $("html,body").animate({scrollTop: 0}, 500)
            });


            var COUNT = 0;
            $("body").on("click", ".mainLeft li", function () {
                var title = $(this).find("span").text();

                var ID = $(this).data("id");
                $.when(getGoodsById(title, ID, 6, 1)).done(function () {
                    layui.use('laypage', function () {
                        var laypage = layui.laypage;
                        //执行一个laypage实例
                        // console.log(COUNT)
                        laypage.render({
                            elem: 'laypage',
                            count: COUNT,
                            limit: 6,
                            theme: "#5599FF",
                            layout: ['count', 'prev', 'page', 'next'],
                            jump: function (obj, first) {

                                if (!first) {
                                    // console.log($(this).data('cid'))
                                    getGoodsById(title, ID, 6, obj.curr);
                                }


                            }
                        });
                    });
                })


            })

            function getGoodsById(title, cateId, limit, page) {
                $(".content").empty();
                var defered = $.Deferred();
                $.ajax({
                    type: "post",
                    url: "/goods/getGoodsById",
                    data: {
                        cateId: cateId,
                        limit: limit,
                        page: page
                    },
                    dataType: "json",
                    success: function (data) {
                        COUNT = data.count;
                        var data = data.data;

                        var html = "";
                        console.log(data)
                        html += `<div class="menu">
        <h1>${title}</h1>
          <div class="box">`;
                        for (let i = 0; i < data.length; i++) {


                            html += ` <div class="card" data-id="${data[i].id}">
                   <img src="${"/upload/goods/" + data[i].imgUrl}">
                   <span class="price">${data[i].price}</span>
                   <p>${data[i].name}</p>
                   <span class="date">${data[i].polishTime}</span>
                   <span class="mark">闲易市场</span>
               </div>`


                        }

                        html += `</div>
        </div>`;
                        $(html).appendTo(".content");


                        defered.resolve();
                    }
                });
                return defered.promise();
            }

            $("body").on("click", ".card", function () {
                var id = $(this).data("id");
                location.href="/detail?id=" + id

            })


            /**
             * 搜索功能
             */
            var SCOUNT = 0;
            $(".searchGoods").click(function () {
                var goodsInfo = $(".goodsInfo").val();
                if(goodsInfo=="" || goodsInfo==null){
                    layer.msg("搜索不可为空！");
                    return;
                }
                $.when( searchGoods(goodsInfo, 6, 1)).done(function () {
                    layui.use('laypage', function () {
                        var laypage = layui.laypage;
                        //执行一个laypage实例
                        // console.log(COUNT)
                        laypage.render({
                            elem: 'laypage',
                            count: SCOUNT,
                            limit: 6,
                            theme: "#5599FF",
                            layout: ['count', 'prev', 'page', 'next'],
                            jump: function (obj, first) {

                                if (!first) {
                                    // console.log($(this).data('cid'))
                                    searchGoods(goodsInfo, 6, obj.curr);
                                }


                            }
                        });
                    });
                })


            })
            // $('.goodsInfo').bind('keypress', function (event) {
            //     if (event.keyCode == "13") {
            //         if(ev.keyCode==13) {
            //             var goodsInfo = $(".goodsInfo").val();
            //             if(goodsInfo=="" || goodsInfo==null){
            //                 layer.msg("搜索不可为空！");
            //                 return;
            //             }
            //             $.when( searchGoods(goodsInfo, 6, 1)).done(function () {
            //                 layui.use('laypage', function () {
            //                     var laypage = layui.laypage;
            //                     //执行一个laypage实例
            //                     // console.log(COUNT)
            //                     laypage.render({
            //                         elem: 'laypage',
            //                         count: SCOUNT,
            //                         limit: 6,
            //                         theme: "#5599FF",
            //                         layout: ['count', 'prev', 'page', 'next'],
            //                         jump: function (obj, first) {
            //
            //                             if (!first) {
            //                                 // console.log($(this).data('cid'))
            //                                 searchGoods(goodsInfo, 6, obj.curr);
            //                             }
            //
            //
            //                         }
            //                     });
            //                 });
            //             })
            //         }
            //     }
            // });

            function searchGoods(goodsInfo, limit, page) {
                $(".main").empty();
                var defered = $.Deferred();
                $.ajax({
                    type: "post",
                    url:  "/goods/searchGoods",
                    data: {
                        goodsInfo: goodsInfo,
                        limit: limit,
                        page: page
                    },
                    dataType: "json",
                    success: function (data) {
                        SCOUNT = data.count;
                        var data = data.data;

                        var html = "";
                        console.log(data)
                        html += `<div class="menu">
          <div class="box">`;
                        for (let i = 0; i < data.length; i++) {


                            html += ` <div class="card" style="width: 25%" data-id="${data[i].id}">
                   <img src="${"/upload/goods/" + data[i].imgUrl}">
                   <span class="price">${data[i].price}</span>
                   <p>${data[i].name}</p>
                   <span class="date">${data[i].startTime}</span>
                   <span class="mark">闲易市场</span>
               </div>`


                        }

                        html += `</div>
        </div>`;
                        $(html).appendTo(".main");
                        defered.resolve();

                    }

                });
                return defered.promise();
            }


            /**
             * 我要发布
             */
            $(".right").click(function () {
                if (!localStorage.getItem("phone")) {
                    layer.msg("请先登录！");
                    return;
                } else {
                    window.open("/user?push=1");
                }
            });

            /**
             * 已发布的商品
             * */
            $(".pull").click(function () {
                window.open("/user?pull=1");
            })
        })
    </script>
</body>

</html>